<template>
	<view class="tarbar">
		<view :class="{tarbar__item:true,active: current === index}"  v-for="(item,index) in list" :key="item.text" @click="tarbarTo(item.path)"> 
			<view :class="{iconfont:true,[''+item.icon]:true}"></view>
			<view>{{item.text}}</view>
			<view class="right">{{item.count? item.count <= 99? item.count : '99+ ': ''}}</view>
		</view>
	
	</view>

</template>

<script setup >
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive,
		defineProps
	} from 'vue'
	import {
		userStore
	} from '../../stores/userInfo/userInfo.js'
	import {
		shopCart
	} from '@/api'
	import {
		getToken
	} from '../../utils/localStoreToken.js'
	let userInfo = reactive({})
	onLoad(() => {
	
	})
	onShow(() => {
	})
	// 获取购物车列表
	function getShopCart() {
		let {
			_id: uid
		} = userInfo
		shopCart.reqShopCartList({
			uid
		}).then(res => {
			if (res.code === 1) {
				list.value[2].count = res.data.length
				
			}
		})
	}
	// 获取userInfo
	async function getUserInfo() {
		const token = getToken()
		const user = userStore()
		try {
			const res = await user.getUserInfo({
				token
			})
			userInfo = res
		} catch (err) {
			return 'ok'
		}
	}
	
	let props = defineProps({
		current: {
			type: Number,
			default: 0
		}
	})
	let list = ref([{
			text: '首页', //首页
			icon: 'icon-home', //未选中图标
			iconPath: '/static/tabbar/indexSelected.png', //选中图片
			path: "/pages/index/index", //页面路径
		},
		{
			text: '分类', //喜欢
			icon: 'icon-fenlei',
			iconPath: '/static/tabbar/likeSelected.png',
			path: "/pages/category/category",
		},
		{
			text: '购物车', //通知
			icon: 'icon-gouwuche',
			iconPath: '/static/tabbar/noticeSelected.png',
			path: '/pages/shopCart/shopCart',
			count: ''
		},
		{
			text: '我的', //我的
			icon: 'icon-wode',
			iconPath: '/static/tabbar/mySelected.png',
			path: "/pages/MyInfo/MyInfo",
		}

	])
	
	
	function tarbarTo(path) {
		uni.switchTab({
			url: path
		})
	}
</script>

<style lang="scss" scoped>
	.tarbar {
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #ccc;
		background-color: #fff;
	}
	.tarbar__item{
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 10rpx;
		position: relative;
	}
	.iconfont{
		font-size:50rpx;
	}
	.active{
		color: #fddc3c;
	}
	.right{
		position: absolute;
		top: -15%;
		right: 20%;
		width: 45rpx;
		height: 45rpx;
		text-align: center;
		line-height: 45rpx;
		background-color: red;
		border-radius: 50%;
		color: #fff;
		transform: scale(0.5);
		&:empty{
			display: none;
		}
	}
</style>
